<template>
	<view class="chargingRecord">
		<chooseDate @onChange="dateChange" />
		<view v-if="j" class="content" >
			<view class="card-head">
				<view class="content-left">
					<image :src="j.imgUrl">
						<text class="date">{{j.start_time}}</text>
					</image>
				</view>
				<view class="content-right">
					<text class="cash">￥{{j.money}}</text>
				</view>
			</view>
			<view class="border">
				<view class="bottom">
					<text class="power"><text>用电量: <text>{{j.total_energy}}度</text></text></text>
					<text class="time"><text>时长: <text>{{j.time}}</text></text></text>
					<view @click="goCharge">
						<view class="goCharge">待结算</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="w" class="content" >
			<view class="card-head">
				<view class="content-left">
					<image :src="w.imgUrl">
						<text class="date">{{w.start_time}}</text>
					</image>
				</view>
				<view class="content-right">
					<text class="cash">￥{{w.money}}</text>
				</view>
			</view>
			<view class="border">
				<view class="bottom">
					<text class="power"><text>用电量: <text>{{w.total_energy}}度</text></text></text>
					<text class="time"><text>时长: <text>{{w.time}}</text></text></text>
					<view @click="goCharge">
						<view class="goCharge">充电中</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-for="(items, i) in list" :key="i">
			<view class="card-head">
				<view class="content-left">
					<image :src="items.imgUrl">
						<text class="date">{{items.start_time}}</text>
					</image>
				</view>
				<view class="content-right">
					<text class="cash">￥{{items.money}}</text>
				</view>
			</view>
			<view class="border">
				<view class="bottom">
					<text class="power"><text>用电量: <text>{{items.total_energy}}度</text></text></text>
					<text class="time"><text>时长: <text>{{items.time}}</text></text></text>
					<view @click="choose(i)">
						<view class="detail">详情</view>
					</view>
				</view>
			</view>
			<!-- 弹出层从点记录详情 -->
			<uni-popup ref="popup" type="dialog">
				<view class="card-base">
					<view class="base">
						<view class="base-content">
							<text>{{orderInfo.start_time}}</text>
							<view>至</view>
							<text>{{orderInfo.last_time}}</text>
						</view>
						<text class="power"><text>用电量:</text>{{orderInfo.total_energy}}<text>度</text></text>
					</view>
					<view class="base-coast">
						<view>
							<text>电费</text>
							<text class="coin">{{orderInfo.unit_price}}<text>元/度</text></text>
						</view>
						<text class="dollor"><text>￥</text>{{orderInfo.cost_unit_price}}</text>
					</view>
					<view class="base-money">
						<view>
							<text>服务费</text>
							<text class="yuan">{{orderInfo.service_price}}<text>元/度</text></text>
						</view>
						<text class="dollor"><text>￥</text>{{orderInfo.cost_service_price}}</text>
					</view>
					<!-- <view class="discount">
						<text>优惠</text>
						<view class="close-right">
							<text>卡卷抵扣费用￥<text>{{items.discount_money}}</text></text>
							<text>暂无卡券</text>
						</view>
					</view> -->
					<view class="card-bottom">
						<text>总计</text>
						<text class="dollor"><text>￥</text>{{orderInfo.money}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<view v-show="isLoadMore">
			<view class="status">{{loadStatus}}</view>
		</view>
	</view>
</template>

<script>
	import chooseDate from "../../components/chooseDate.vue"
	import { post } from "../../api/index.js"
	import paths from "../../config/path.js"
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import uniPopupMessage from '../../components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '../../components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			chooseDate,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				list: [],
				date: "",
				url: "",
				userData: "",
				orderInfo: {},
				page: 1,
				isLoadMore: false,
				loadStatus: "",
				w: "",
				j: ""
			}
		},
		created() {
			let userData = uni.getStorageSync("userInfo")
			let url = paths.charging
			let time = this.setDate(new Date())
			this.date = time
			this.url = url
			this.userData = userData
			post(url, {
				userid_locked: userData.userid_locked,
				time: time,
				page_index: this.page
			}).then(res => {
				console.log(res)
				// 如果是充电中
				if(res.data.data.w) {
					this.w = res.data.data.w
				}
				// 如果是订单未结算
				if(res.data.data.j) {
					this.j = res.data.data.j
				}
				if(res.data.data.list) {
					this.list = this.list.concat(res.data.data.list)
				} else {
					this.isLoadMore = true
					this.loadStatus = '没有更多'
				}
			})
		},
		// 上拉触底
		onReachBottom() {
			if(!this.isLoadMore) {
				this.page = this.page + 1
				post(this.url, {
					userid_locked: this.userData.userid_locked,
					time: this.date,
					page_index: this.page
				}).then(res => {
					// console.log(res)
					if(res.data.data.list) {
						if(Number(res.data.data.total) <= this.list.length) {
							this.isLoadMore = true
							this.loadStatus = '没有更多'
						} else {
							uni.showToast({
								icon: 'loading',
								title: '加载中'
							})
							this.isLoadMore = false
							this.list = this.list.concat(res.data.data.list)	
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = '没有更多'
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		methods: {
			goCharge() {
				if(this.w.url) {
					uni.navigateTo({
						url: this.w.url
					})
				} 
				if(this.j.url) {
					uni.navigateTo({
						url: this.j.url
					})
				}
			},
			// 从子组件获得的参数
			dateChange(val) {
				this.date = val
				this.page = 1
				post(this.url, {
					userid_locked: this.userData.userid_locked,
					time: val,
					page_index: this.page
				}).then(res => {
					// console.log(res)
					if(res.data.data.list) {
						this.list = []
						this.list = this.list.concat(res.data.data.list)
						this.isLoadMore = false
					} else {
						this.list = []
						this.isLoadMore = true
						this.loadStatus = '没有更多'
					}
				})
			},
			choose(i) {
				let orderInfo = paths.orderInfo
				post(orderInfo, {
					order_id: this.list[i].id
				}).then(res => {
					// console.log(res)
					this.orderInfo = res.data.data
				})
				this.$refs.popup[0].open()
			},
			setDate(days) {
				let dates = new Date(days)
				let year = dates.getFullYear()
				let month = dates.getMonth()
				month = month < 10 ? ("0" + (month + 1)) : month + 1
				return year + "-" + month
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
	image {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		width: 100%;
	}

	.power,
	.time {
		color: #999999;
		letter-spacing: 1px;
		font-size: 25rpx;
		margin-right: 50rpx;
	}

	.detail {
		width: 60rpx;
		height: 30rpx;
		border: 1px solid #0FB9F0;
		border-radius: 999px;
		color: #0FB9F0;
		font-size: 20rpx;
		text-align: center;
		background: rgb(200, 228, 254);
	}
	.goCharge {
		width: 120rpx;
		height: 30rpx;
		border: 1px solid #ff4891;
		border-radius: 999px;
		color: #ff4891;
		font-size: 20rpx;
		text-align: center;
		background: rgb(223, 218, 245);
	}

	.card-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 75rpx;
	}

	.content-left {
		margin-left: 30rpx;
		color: #555555;
		font-size: 25rpx;
	}

	.date {
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.content-right {
		margin-right: 30rpx;
	}

	.cash {
		font-weight: bold;
	}

	.card-base {
		background-color: #FFFFFF;
		border-top: .5px solid #707070;
		padding: 25rpx;
	}

	.base {
		color: #999999;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.discount {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: .5px solid #707070;
	}
	
	.card-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		/* margin-top: 15rpx; */
	}

	.border {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		border-top: .5px solid #707070;
		width: 93%;
		margin: auto;
	}

	.base-coast,
	.base-money {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.base-content>text {
		margin-right: 12rpx;
	}

	.power {
		color: #999999;
		letter-spacing: 1px;
		font-size: 25rpx;
	}

	.detail {
		width: 60rpx;
		height: 30rpx;
		border: 1px solid #0FB9F0;
		border-radius: 999px;
		color: #0FB9F0;
		font-size: 20rpx;
		text-align: center;
		background: rgb(200, 228, 254);
	}

	.content {
		width: 95%;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin: 30rpx auto;
		z-index: 2;
		box-shadow: 1px 1px 2px #808080;
	}

	.coin {
		font-size: 25rpx;
		color: #999999;
		margin-left: 55rpx;
	}

	.yuan {
		font-size: 25rpx;
		color: #999999;
		margin-left: 25rpx;
	}

	.dollor {
		font-weight: bold;
	}

	.close-right {
		text-align: -webkit-right;
	}

	.close-right>text {
		color: #ff4891;
		font-size: 25rpx;
	}
	
	.status {
		margin: 30rpx 0;
		color: #999999;
		text-align: center;
	}
</style>
